<template>
  <div class="container">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;padding:1.5rem">劳资专管员信息</div>

      <div style="height:90%">
        <div style="font-size:1.2rem;color:#fff;margin-bottom:1.5rem">
          <span style="width:20%">标段号</span>
          <span style="width:40%">单位名称</span>
          <span style="width:10%">姓名</span>
          <span style="width:20%">手机号码</span>
        </div>
        <div style="height:85%">
          <ul style="height:100%">
            <li
              v-for="(item,index) in List"
              :key="index"
              style="margin-bottom:2rem;color:#fff;"
              :class="[index%2==0 ? 'li-odd' :'li-even']"
            >
              <div class="flexStart" style="text-align:center">
                <div style="width:20%">{{item.tenderCode}}</div>
                <div style="width:40%">{{item.orgName}}</div>
                <div style="width:10%">{{item.fullName}}</div>
                <div style="width:20%">{{item.cellphone}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryLabourManager } from '@/api/wageStatistics'
export default {
  data() {
    return {
      List: []
    }
  },

  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      queryLabourManager({ projectId: this.$store.state.userInfo.projectId }).then((res) => {
        this.List=res.data.data
      })
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  height: 100%;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  overflow: auto;
}
li {
  cursor: pointer;
  padding: 0.33rem;
}
ul::-webkit-scrollbar {
  display: none;
}
span {
  display: inline-block;
  text-align: center;
}
.li-odd {
  background: #0f2139;
}
.li-even {
  background: #143f53;
}

li:hover {
  color: #fff;
  background: #007d65;
  transition: 0.5s all;
}
</style>